<template>
    <div>
        <SuperTable ref="table" path="/common/platform/index" :params="params" :columns="columns">
            <Button slot="header-left" type="primary" @click="showModal = true">新增平台</Button>
        </SuperTable>
        <Modal
            v-model="showModal"
            title="新增平台"
            :width="480"
            @on-cancel="handleCancel"
        >
            <Form ref="form" :model="form" :rules="rules" :label-width="80" style="padding-right: 40px;">
                <FormItem label="平台名称" prop="name">
                    <Input v-model="form.name" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :disabled="submiting" @click="handleCancel">取消</Button>
                <Button type="primary" :loading="submiting" @click="handleSubmit">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
export default {
    components: {
        SuperTable
    },
    data() {
        return {
            submiting: false,
            showModal: false,
            params: {
                page: 1,
                pageSize: 20
            },
            form: {
                name: ''
            },
            rules: {
                name: [
                    {required: true, message: '请输入平台名称', trigger: 'blur'}
                ]
            },
            columns: [
                {
                    title: '平台名称',
                    key: 'name'
                },
                {
                    title: '创建时间',
                    key: 'created_at'
                },
                {
                    title: '操作',
                    width: 160,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small',
                                },
                                on: {
                                    click: () => {
                                        this.handleDelete(params.row);
                                    }
                                }
                            }, '删除')
                        ])
                    }
                }
            ]
        }
    },
    methods: {
        handleSubmit() {
            if(this.submiting) return false;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    const { form } = this;
                    let params = {
                        name: form.name
                    }
                    this.$ajax.post('/common/platform/save', params).then(res => {
                        this.$Message.success('添加成功');
                        this.handleCancel();
                        this.$refs.table.init();
                        this.submiting = false;
                    }).catch(err => {
                        this.submiting = false;
                        this.$Message.error(err.message || '提交失败');
                    })
                }
            })
        },
        handleDelete(row) {
            this.$Modal.confirm({
                title: "操作提示:",
                content: `<p>您确定要删除平台‘${row.name}’吗?</p>`,
                onOk: () => {
                    const msg = this.$Message.loading({
                        content: '正在提交删除',
                        duration: 0
                    });
                    this.$ajax.delete('/common/platform/delete', {params: {ids: [row.id]}}).then(() => {
                        msg();
                        this.$Message.success('删除成功');
                        this.$refs.table.reload();
                    }).catch(err => {
                        msg();
                        this.$Message.error(err.message || '删除失败');
                    })
                }
            });
        },
        handleCancel() {
            this.showModal = false;
            setTimeout(() => {
                this.form.name = '';
            }, 300)
        }
    }
}
</script>